<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{ count }}</p>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 如果有变量不需要用到html的模板里面，就尽量不要写在data里面，写在data里面，vue底层会做监听，有性能浪费
      let timer;

      const vm = new Vue({
        // el: "#app",
        data: {
          count: 10,
          // timer: null,
        },
        methods: {
          fn() {},
        },
        // template相当于outterHTML
        // template: "<h1>标题</h1>",

        // 创建阶段和挂载阶段的函数是会自动执行的
        // 生命周期不看写的顺序

        // 创建阶段

        // vue自己做了初始化事件和生命周期

        beforeCreate() {
          // 不能做数据请求，因为拿不到data的数据
          console.log("beforeCreate", this.count, this.fn);

          // setTimeout(() => {
          //   console.log(this.count, 1);
          // }, 2000);
          // console.log(this.count, 2);
        },

        // vue自己做了初始化data和methods

        created() {
          console.log("created", this.count, this.fn);
        },

        // 检查是否有el选项
        // 检查是否有template选项

        // 挂载阶段
        beforeMount() {
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },

        // 用真实dom去替换了虚拟dom

        mounted() {
          console.log("mounted", document.querySelector("#app").innerHTML);
          timer = setInterval(() => {
            console.log(123);
          }, 1000);
          setTimeout(() => {
            this.count = 20;
          }, 2000);
          setTimeout(() => {
            // 用于手动的销毁当前的组件
            // 销毁的不是页面，销毁的是响应式系统
            this.$destroy();
          }, 5000);
        },

        // 更新阶段,只有当数据改变的时候才会触发
        // 这两个函数都是在数据改变以后触发的
        // 数据的改变和页面的渲染是异步发生的
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("#app").innerHTML
          );
          // this.count++;
        },

        // 虚拟dom的重新编译

        // 不要在这里改变数据，会造成死循环
        updated() {
          console.log(
            "updated",
            this.count,
            document.querySelector("#app").innerHTML
          );
        },

        // 销毁阶段
        // 定时器/js事件监听/websocket/第三方插件的卸载
        beforeDestroy() {
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        // 一般不写
        destroyed() {
          console.log("destroyed");
        },
      });

      vm.$mount("#app");
    </script>
  </body>
</html>
